
<template>
  <div class="app">
    <topbar/>
  <personbar/>
    <div class="container" >
      <div class="leftpart bg-ffffff">
       <div class="hmenu">
         <nuxt-link to='/person/collect'> 我的收藏</nuxt-link>
         <nuxt-link class="on" to='/person/exchange'> 交易记录</nuxt-link>
         <nuxt-link to='/person/setup'> 账号设置</nuxt-link>
       </div>

     <div class="exbox">
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="getRowClass">
          <el-table-column
            prop="order_number"
            label="交易号"
            width="150">
          </el-table-column>
        <el-table-column
          prop="order_typeCn"
          label="内容类型"
          width="90">
        </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="220">
            <!--<el-button @click.native="jumpDetail(row)"></el-button>-->
            <template slot-scope="scope">

            <el-button type="text" size="small"  v-if="scope.row.order_typeCn=='文章购买'" @click.native="jumpDetail(scope.row.article_unique_code)">{{scope.row.title}}</el-button>
              <el-button type="text" size="small"  style="pointer-events:none" v-if="scope.row.order_typeCn=='充值'" >{{scope.row.title}}</el-button>

            </template>
          </el-table-column>
          <el-table-column
            prop="pay_wayCn"
            label="支付方式"
            width="90">
          </el-table-column>
          <el-table-column
            prop="pay_priceCn"
            label="金额"
            width="80">
          </el-table-column>
          <el-table-column
            prop="dateCn"
            label="购买时间"
            width="180">
          </el-table-column>
        </el-table>

<!-- 分页  -->
       <!-- 分页  -->
       <div class="gap10"></div>
       <div class="pagearea">
         共有 {{totalNum}} 条记录
         <div class="fr">
           <el-pagination
             @current-change="handleCurrentChange"
             background
             layout="prev, pager, next"
             :current-page="currentPage"
             :page-size="10"
             :total="totalNum">
           </el-pagination>
         </div>
       </div>

      </div>
      </div>
<!-- 左右分离-->
      <div class="rightpart">
          <Personright/>
       </div>

</div>
      <div class="gap100"></div>


 <Bottombar/>
  </div>
</template>

<script>
import Topbar from '~/components/Topbar.vue'
import Personbar from '~/components/Personbar.vue'
import Personright from '~/components/Personright.vue'
import Bottombar from '~/components/Bottombar.vue'
import axios from 'axios'
import qs from 'qs'
export default {
  components: {
    Topbar,
    Bottombar,
    Personbar,
    Personright
  },
  data(){
    return{
      currentPage:1,
      pageCount:10,
      totalNum:0,
      isShare:false,
      tableData: [],
      user:{}
    }
  },
  mounted(){
    //this.user =  JSON.parse(localStorage.getItem("user"));
   // this.getSessionUser();
    this.user =  JSON.parse(localStorage.getItem("user"));
    if(this.user!=null && this.user!=null && this.user!=undefined && this.user!='{}'){
      this.getPayRecord();

    }else{
      this.$router.push({path: '/'});
    }
  },
  methods:{
    getSessionUser(){

      let key=localStorage.getItem("user_unique_code");
      if(key!=null && key!="" && key!=undefined){
        console.log("key "+key)
        axios.post('https://wenku.qikan.com:11000/admin/lib/getTokenByUserId.html',qs.stringify({'key':key})
        )
          .then((response)=>{
            console.log("resultuser "+response.data);
            let result= response.data;
            if(result.code==1){
              console.log(result.data.trim())
              this.user=JSON.parse(result.data.trim());
              console.info("usermsg "+this.user)
              // if(this.user!=null && this.user!="" && this.user!=undefined){
              //   // this.poster=this.user.poster;
              //   // console.log("uuaa  "+this.user.mobile)
              //   // this.isLogin=true;
              // }
              this.getPayRecord();
            }else{
              this.$router.push({path: '/'});
            }
          })
          .catch((error)=>{
            console.log(error)
          })
      }else{
        return null;
      }


    },
    jumpDetail(collkey){
      this.$router.push({path:'/article',query:{'collkey':collkey}});
      console.log("info");
    },
    getPayRecord(){
      var vm = this;
      // var user=JSON.parse(localStorage.getItem("user"));
      axios.get('https://wenku.qikan.com:11000/user/payrecord?unique_code='+vm.user.unique_code+"&page="+vm.pageCount)
        .then(function(response){
          console.log(response.data.data);
          vm.tableData=response.data.data;
          if(response.data.data[0].totalNum!=null & response.data.data[0].totalNum!='undefined'){
            vm.totalNum = response.data.data[0].totalNum;
          }
        })
    },
    toggleShare(){
      this.isShare=!this.isShare;
    },
    zanup(){},
    zandown(){},
    handleCurrentChange(val) {
      this.pageCount = val * 10;
      this.currentPage = val;
      this.getPayRecord();
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
  if (rowIndex == 0) {
      return 'background:#EFEFEF'
    } else {
        return ''
    }
   },

  }
}
</script>

<style scoped>
  .hmenu{border-bottom:1px solid #F0F2F7; width: 100%; height: 52px; clear: both; padding:0 15px;}
  .hmenu a{color:#1A1A1A; line-height: 50px; height: 50px; width: 70px; margin-right: 43px; display: inline-block; font-weight: 600;}
  .on{ color: #225599 !important; border-bottom: 3px solid #0084FF;}
  .exbox{ width: 100%; padding: 15px 25px 30px 15px; overflow: hidden;}
  .gap10{width: 100%; height: 10px; clear: both;}
  .pagearea{ width: 100%; margin-top: 18px;  color:#475669; font-size: 13px; line-height: 30px; display: block；}
  .pagearea .fr{ float: right; }
  .el-button--small{font-size:14px !important;}
</style>
